<template>
  <!-- 头像组件 -->
  <div class="my-photo" @click="toPersonPage">
<!--     <div v-if="user"> -->
      <img :src="baseFilePath+photo" v-if="photo">
      <div
        class="default-photo"
        :style="{lineHeight:lineHeight,fontSize:fontSize}"
        v-if="!photo"
      >{{userName?userName.substring(0, 1):''}}</div>
    </div>
 <!--  </div> -->
</template>

<script>
export default {
  name: "my-photo",
  props: ["user", "lineHeight", "fontSize","userId","photo","userName","nojump"],
  data: function() {
    return {
      style: {
        lineHeight: "auto",
        fontSize: "12px"
      },
      baseFilePath:this.GLOBAL.baseFilePath
    };
  },
  methods: {
    toPersonPage() {
      if(this.nojump)
        return;
      let myuser = this.$store.state.user;
      if (myuser && myuser.id !== this.userId) {
        let routeData = this.$router.resolve({
          name: "personPage",
          query: { id: this.userId }
        });
        window.open(routeData.href, "_blank");
      }
    }
  },
  computed: {},

  mounted: function() {
    /* this.style.lineHeight=this.lineHeight
    this.fontSize=this.fontSize */
  }
};
</script>

<style lang="scss" scoped>
img {
  height: 100%;
  width: 100%;
}
.my-photo {
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.default-photo {
  height: 100%;
  width: 100%;
  background-color: brown;
  color: wheat;
  text-align: center;
}
div {
  height: 100%;
}
</style>